<template>
    <div class="commentContainer" ref="warpper">
        <!-- main -->
        <div class="commentMain">
            <!-- head -->
            <div class="commentHead card">
                <!-- title -->
                <div class="title">
                    <div class="title-left">
                        总评
                        <van-rate
                            v-model="totalInfo.totalScore"
                            :size="25"
                            color="#f44"
                            void-icon="star"
                            void-color="#eee"
                        />
                    </div>
                    <div>好评率{{totalInfo.praiseWithPercent}}</div>
                </div>
                <!-- labels -->
                <ul class="labels">
                    <li :class="{active:active==index}"
                        v-for="(item, index) in labels"
                        :key="index"
                        @click="toAnother(index, item.labelName, item.labelCount)"
                    >
                    {{item.labelName}}({{item.labelCount}})
                    </li>
                </ul>
            </div>
            <!-- list -->
            <ul class="comment-list">
                <li class="card" v-for="(item, index) in product.commentList" :key="item.creationDate + index">
                    <div class="head">
                        <div class="name">
                            <img src="" alt="">
                            <p>{{item.accountName}}</p>
                            <van-rate
                                v-model="item.score"
                                :size="25"
                                color="#f44"
                                void-icon="star"
                                void-color="#eee"
                            />
                        </div>
                        <div class="time">{{item.creationDate}}</div>
                    </div>
                    <div class="contant">
                        <div class="txt">{{item.content}}</div>
                    </div>
                </li> 
            </ul>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import BScroll from 'better-scroll'
import { mapState, mapActions } from 'vuex';
import { setTimeout } from 'timers';
export default {
    data() {
        return {
            value: 3,
            active: 0,
            category: '',
            page: 1,
            totalInfo: {},
            labels: [],
            count: Number
        }
    },
    computed: {
        ...mapState(['product'])
    },
    methods: {
        ...mapActions(['getComment', 'clearComment']),
        // 点击切换评论
        toAnother(index, category, count) {
            // 选中高亮
            this.active = index
            // 清空列biao
            this.clearComment()
            // 获取分类作为参数
            this.category = category
            // 页面归1
            this.page = 1
            // 传入参数，获取数据
            this.getList(count)
            // 获取页数
            this.$nextTick(() => {
                this.count = count
            })
        },
        // 请求评论列表
        async getList(count) {
            // 获取参数
            let code = this.$route.params.code
            let category = this.category
            let page = this.page
            // 获取数据
            await this.getComment({code, category, page})
            // 设置warpper高度
            let h = document.body.clientHeight - 44 - 48 + 'px'
            this.$refs.warpper.style.height = h
        },
        // 设置scroll
        setScroll() {
            this.scroll = new BScroll(this.$refs.warpper, {
                scrollY: true,
                probeType: 1,
                click: true,
                pullUpLoad: {
                    threshold: 50
                }
            })

            // 下拉加载
            this.scroll.on('pullingUp', () => {
                // 总页数

                let totalPage = this.count / 10
                // console.log(this.count);
                
                if (this.page < totalPage) {
                    this.getList()
                }

                this.scroll.finishPullUp()        

                if (this.page >= totalPage) {
                    Toast({
                        message: '到底咯',
                        position: 'bottom',
                        duration: 1000
                    });
                    return
                }

                this.page++
            })
        }
    },
    async mounted() {
        // 先获取评论列表
        await this.getList()
        // 再设置滚动
        this.setScroll()
        // 获取总数数据
        this.totalInfo = this.product.commentTotal
        // 获取tags数据
        this.labels = this.product.labels
        // 获取初始页数
        this.count = this.totalInfo.totalCount
    }
}
</script>

<style lang="scss" scoped>
    .commentContainer {
        background: #f5f5f5;
        .commentMain {
            // head
            .commentHead {
                .title {
                    // line-height: 1!important;
                    display: flex;
                    justify-content: space-between;
                    font-weight: 700;
                    margin-bottom: .1rem;
                    font-size: 0.14rem;
                    .title-left {
                        display: flex;
                        i {
                            margin-left: 0.03rem;
                            font-size: 0.14rem!important;
                        }
                    }
                }
                .labels {
                    white-space: normal;
                    li {
                        display: inline-block;
                        padding: .05rem .1rem;
                        border: 1px solid #ccc;
                        border-radius: .15rem;
                        margin: 0 .08rem .08rem 0;
                        font-size: 0.12rem;
                        color: #222;
                    }
                    .active {
                        color: #ff4a4a;
                        border: 1px solid #ff4a4a;
                    }
                }
            }
            // card
            .card {
                background: #fff;
                margin-bottom: .1rem;
                padding: .15rem;
                .head {
                    display: flex;
                    align-items: center;
                    margin-bottom: .1rem;
                    .name {
                        flex: auto;
                        img {
                            width: 0.4rem;
                            float: left;
                            margin-right: .05rem;
                            border-radius: 50%;
                            overflow: hidden;
                        }
                        p {
                            margin-top: 0.06rem;
                            font-size: 0.13rem;
                        }
                        i {
                            font-size: 0.13rem!important;
                        }
                    }
                    .time {
                        flex: 0 0 auto;
                        font-size: 0.12rem;
                        color: #999;
                    }
                }
                .contant {
                    .txt {
                        font-size: 0.14rem;
                        line-height: 1.5;
                        margin-bottom: .05rem;
                    }
                }
            }
        }
    }
</style>
